<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>亚健康</title>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/animate.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="music">
        <audio src="./media/背景音乐.mp3"></audio>
        <img src="./img/p1/yinle.png" alt="" class="icon">
      </div>
      <div class="page load">
        <div class="progress w-center h-center">
          <div class="bar"></div>
          <div class="text w-center h-center">50%</div>
        </div>
      </div>
      <div class="page p1">
        <img src="./img/p1/sun.png" alt="" class="sun">
        <img src="./img/p1/ball.png" alt="" class="ball ani-ball">
        <img src="./img/p1/btn.png" alt="" class="btn w-center ani-scale">
      </div>
      <div class="page p2">
        <img src="./img/p1/sun.png" alt="" class="sun">
        <img src="./img/p2/back.png" alt="" class="back">
        <div class="title">什么是亚健康?</div>
        <img src="./img/p2/btn.png" alt="" class="btn w-center ani-scale">
      </div>
      <div class="page p3">
        <img src="./img/p1/sun.png" alt="" class="sun">
        <img src="./img/p2/back.png" alt="" class="back">
        <div class="title">亚健康测试题</div>
        <div class="list w-center">
          <div class="item"><span>A</span><span>经常感冒</span></div>
          <div class="item"><span>B</span><span>失眠多梦</span></div>
          <div class="item"><span>C</span><span>精神压力大</span></div>
          <div class="item"><span>D</span><span>注意力不集中</span></div>
          <div class="item"><span>E</span><span>记忆力下降</span></div>
          <div class="item"><span>F</span><span>焦躁不安</span></div>
          <div class="item"><span>G</span><span>恐惧胆怯</span></div>
          <div class="item"><span>H</span><span>人际关系紧张</span></div>
          <div class="item"><span>I</span><span>睡眠紊乱</span></div>
          <div class="item"><span>J</span><span>腰酸背痛</span></div>
        </div>
        <img src="./img/p3/btn.png" alt="" class="btn w-center ani-scale">
      </div>
      <div class="page p4">
        <img src="./img/p1/sun.png" alt="" class="sun">
        <img src="./img/p2/back.png" alt="" class="back">
        <div class="title">亚健康测试结果</div>
        <div class="score w-center">
          <div class="stars">
            <img src="./img/p4/star.png" alt="">
            <img src="./img/p4/star.png" alt="">
            <img src="./img/p4/star.png" alt="">
            <img src="./img/p4/star.png" alt="">
            <img src="./img/p4/star.png" alt="">
          </div>
          <span>3.5</span>
        </div>
        <div class="list w-center">
          <div class="item">经常感冒</div>
          <div class="item">失眠多梦</div>
          <div class="item">精神压力大</div>
        </div>
        <img src="./img/p4/btn.png" alt="" class="btn w-center ani-scale">
      </div>
      <div class="page p5">
        <img src="./img/p2/back.png" alt="" class="back">
        <img src="img/p5/zhengshu.png" alt="" class="zhengshu">
        <img src="./img/p5/top.png" alt="" class="top">
        <img src="./img/p5/btn.png" alt="" class="btn w-center ani-scale">
      </div>
    </div>
  </body>
  <script src="js/utils.js"></script>
  <script src="js/index.js"></script>
</html>